<template>
    <div>
        <div class="container-fluid pt-3">
            <div class="row">
                <div class="col" style="flex-grow: 0;width: 10rem;">
                    <ul class="nav nav-pills">
                        <!-- 使用 v-for 循环渲染列表 -->
                        <li class="nav-item" v-for="(item, index) in navItems" :key="index">
                            <!-- 使用 :class 动态绑定 active 类 -->
                            <a class="nav-link" :class="{ active: activeIndex === index }"
                                @click="setActiveIndex(index)" href="#">{{ item }}</a>
                        </li>
                    </ul>
                </div>
                <div class="col">
                    <section v-if="activeIndex == 0" class="d-flex flex-column">
                        <button type="button" class="btn btn-outline-primary" @click="index_click">index</button>
                        <button type="button" class="btn btn-outline-primary" @click="login_click">login</button>
                        <button type="button" class="btn btn-outline-primary" @click="register_click">register</button>
                        <button type="button" class="btn btn-outline-danger" @click="logout_click">logout</button>
                    </section>
                    <section v-if="activeIndex == 1" class="d-flex flex-column">
                        <button type="button" class="btn btn-outline-primary" @click="users_click">users</button>
                        <button type="button" class="btn btn-outline-primary" @click="user_current_click">info</button>
                        <button type="button" class="btn btn-outline-primary" @click="user_update_click">update</button>
                    </section>
                    <section v-if="activeIndex == 2" class="d-flex flex-column">
                        <button type="button" class="btn btn-outline-primary" @click="todos_click">todos</button>
                        <button type="button" class="btn btn-outline-primary" @click="todo_add_click">add</button>
                        <button type="button" class="btn btn-outline-primary" @click="todo_update_click">update</button>
                        <button type="button" class="btn btn-outline-primary" @click="todo_delete_click">delete</button>
                    </section>
                </div>
                <div class="col">
                    
                    <ul class="userinfo">
                        <li> <label>username</label> <span>{{ userStore.username }}</span></li>
                        <li> <label>isLogin</label> <span>{{ userStore.isLogin }}</span></li>
                        <li> <label>token</label> <span>{{ userStore.token }}</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import * as userApi from '../api/users.api';
import * as todosApi from '../api/todos.api';
import { useUserStore } from '../stores/user.store';
import { MessageBox } from '../utils/MessageBox';
import { ResponseStatus } from '../utils/enums';
import { title } from 'process';
let userStore = useUserStore();
// 定义响应式数据 navItems 存储导航项
const navItems = ref(['acount', 'user', 'todo']);
// 定义响应式数据 activeIndex 存储当前激活项的索引
const activeIndex = ref(0);
// let result = ref("");

// 定义点击事件处理函数 setActiveIndex
const setActiveIndex = (index: number) => {
    activeIndex.value = index;
    // result.value = index.toString();
};

// 定义 login_click 函数
const login_click = async () => {
    console.log('Login button clicked');
    // 这里可以添加登录逻辑
    try {
        let res = await userStore.login('aaa', 'bbb','');
        console.log(res);
    } catch (error:any) {
        console.log("login_click",error)
        MessageBox.alert(error);
    }
};
// 定义 register_click 函数
const register_click = async () => {
    console.log('Register button clicked');
    // 这里可以添加注册逻辑
    try {
        let res:ResponseObject<User> = await userApi.register('ccc2', 'ddd2');
        if(res.status!==ResponseStatus.success){
            throw res.message;
        }
        console.log(res);
    } catch (error:any) {
        console.log("register_click",error)
        MessageBox.alert(error); 
    }
};
// 定义 logout_click 函数
const logout_click = async () => {
    console.log('Logout button clicked');
    try {
        let res = await userStore.logout('');
        console.log(res);
    } catch (error:any) {
        console.log("logout_click",error)
        MessageBox.alert(error);
    }
}

// 定义 todos_click 函数
const todos_click = async () => {
    console.log('Todos button clicked');
    try {
        // 这里可以添加获取 todos 列表的逻辑
        // 假设存在一个 todosApi 模块来处理 todos 相关的 API 请求
        let res:ResponsePage<any> = await todosApi.getTodos(1,'');
            
        console.log(res);
    } catch (error: any) {
        console.log("todos_click", error);
        MessageBox.alert(error);
    }
};

// 定义 todo_add_click 函数
const todo_add_click = async () => {
    console.log('Add todo button clicked');
    try {
        // 这里可以添加添加 todo 的逻辑
        let res = await todosApi.createTodo('New Todo', false, 'This is a new todo item.');
        console.log(res);
    } catch (error: any) {
        console.log("todo_add_click", error);
        MessageBox.alert(error);
    }
};

// 定义 todo_update_click 函数
const todo_update_click = async () => {
    console.log('Update todo button clicked');
    try {
        // 这里可以添加更新 todo 的逻辑
        let res = await todosApi.updateTodo(13, 'Updated Todo', false, 'This todo has been updated.');
        console.log(res);
    } catch (error: any) {
        console.log("todo_update_click", error);
        MessageBox.alert(error);
    }
};

// 定义 todo_delete_click 函数
const todo_delete_click = async () => {
    console.log('Delete todo button clicked');
    try {
        // 这里可以添加删除 todo 的逻辑
        let res = await todosApi.deleteTodo(2);
        console.log(res);
        if (res.status !== ResponseStatus.success) {
            throw res.message;
        }
    } catch (error: any) {
        console.log("todo_delete_click", error);
        MessageBox.alert(error);
    }
};

// 定义 users_click 函数
const users_click = async () => {
    console.log('Users button clicked');
    try {
        // 这里可以添加获取用户列表的逻辑
        // 假设存在一个 userApi 模块来处理用户相关的 API 请求
        let res = await userApi.getUsers(1);
        console.log(res);
    } catch (error: any) {
        console.log("users_click", error);
        MessageBox.alert(error);
    }
};

// 定义 user_current_click 函数
const user_current_click = async () => {
    console.log('Current user info button clicked');
    try {
        // 这里可以添加获取当前用户信息的逻辑
        // 假设存在一个 userApi 模块来处理用户相关的 API 请求
        let res = await userApi.getCurrentUser();
        console.log(res);
        if (res.status!== ResponseStatus.success) {
            throw res.message;
        }
        // userStore.username = res.data.username;

    } catch (error: any) {
        console.log("user_current_click", error);
        MessageBox.alert(error);
    }
};

// 定义 user_update_click 函数
const user_update_click = async () => {
    console.log('Update user button clicked');
    try {
        // 这里可以添加更新用户信息的逻辑
        // 假设存在一个 userApi 模块来处理用户相关的 API 请求
        let res = await userApi.updateCurrentUser('NewUsername', 'NewPassword', 'New Discription');
        console.log(res);
    } catch (error: any) {
        console.log("user_update_click", error);
        MessageBox.alert(error);
    }
};

// 定义 index_click 函数
const index_click = async () => {
    console.log('Index button clicked');
    try {
        // 这里可以添加 index 页面相关的逻辑
        // 例如请求 index 页面的数据
        // 假设存在一个 indexApi 模块来处理 index 页面相关的 API 请求
        let res = await userApi.getHomeData();
        console.log(res);
    } catch (error: any) {
        console.log("index_click", error);
        MessageBox.alert(error);
    }
};
</script>

<style scoped>
button {
    max-width: 15rem;
    margin-bottom: 1rem;
}
.userinfo {
    list-style: none;
    padding: 0;
    label {
        /* font-weight: bold; */
        width: 5rem;
    }
}
</style>